<template>
  <div class="sidebar">
    <div class="top">
      <router-link class="logo" :to="{ name: 'home' }">
        <img src="@/assets/logo.png" />
      </router-link>
      <div class="menu-list">
        <router-link
          v-for="menu in menuList"
          :key="menu.id"
          :to="{ name: menu.name }"
        >
          <div class="menu" :class="{ active: menu.name === currentRouteName }">
            <component :is="menu.icon" />
            <span>{{ menu.text }}</span>
          </div>
        </router-link>
      </div>
    </div>

    <div class="bottom">
      <!-- <div class="back" @click="onBackClick">
        <RollbackOutlined />
        <span>返回</span>
      </div> -->
      <a-popover placement="rightBottom">
        <template #content>
          <a-button type="link" @click="onLogoutClick">注销</a-button>
        </template>
        <div class="user">
          <div class="avatar">
            <img :src="currentUser?.avatar || defaultAvatar" />
          </div>
          <div class="name">{{ currentUser?.username }}</div>
        </div>
      </a-popover>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';
import { userLoginOut } from '@/api/common';

import {
  UnorderedListOutlined,
  ToolOutlined,
  SettingOutlined,
  RollbackOutlined,
  SplitCellsOutlined,
} from '@ant-design/icons-vue';
import { useEnv } from '@/hooks/useEnv';
import { clear_user_info } from '@/utils/storage';

import { useUserStore } from '@/store/user';
import defaultAvatar from '@/assets/default_avatar2.png';

const userStore = useUserStore();
const router = useRouter();

const { currentUser } = storeToRefs(userStore);

const route = useRoute();
const allMenuList = ref([
  {
    id: 1,
    name: 'category',
    icon: UnorderedListOutlined,
    text: '类目管理',
  },
  {
    id: 2,
    name: 'setting',
    icon: SettingOutlined,
    text: '站点配置',
    requireAdmin: true,
  },
  {
    id: generateUUID(),
    name: 'split',
    icon: SplitCellsOutlined,
    text: '源类目拆分',
  },
  {
    id: 3,
    name: 'global',
    icon: ToolOutlined,
    text: '全局设置',
    requireAdmin: true,
  },
]);

const menuList = ref([]);

onMounted(() => {
  console.log(`output->userStore.currentUser`, userStore.currentUser);
  refreshMenu();
});

// 监听用户信息变化
watch(
  () => userStore.currentUser,
  () => {
    refreshMenu();
  }
);

const refreshMenu = () => {
  menuList.value = allMenuList.value.filter(menu => {
    // return true;
    if (menu.requireAdmin) {
      return userStore.currentUser?.isCategorySystemAdmin;
    }
    return true;
  });
};

const currentRouteName = computed(() => route.name);

const onBackClick = () => {
  const { VITE_PLATFORM_URL } = useEnv();
  window.open(VITE_PLATFORM_URL, 'self');
};
const onLogoutClick = () => {
  userLoginOut().then(res => {
    if (res.code == 'ok') {
      clear_user_info();
      userStore.clearCurrentUser();
      router.push({ path: '/login' });
    }
  })
};
</script>

<style lang="scss" scoped>
.sidebar {
  display: flex;
  flex-direction: column;
  padding: 12px 0;
  align-items: center;
  justify-content: space-between;
  width: 80px;
  background-color: #1c344f;
  flex-shrink: 0;

  .top {
    .logo {
      display: inline-block;
      margin-bottom: 32px;
      width: 50px;
      height: 50px;
      img {
        display: inline-block;
        width: 100%;
      }
    }

    .menu-list {
      .menu {
        margin-bottom: 36px;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: rgba(255, 255, 255, 0.65);
        font-size: 12px;

        .anticon {
          font-size: 36px;
          margin-bottom: 8px;
        }

        &:hover {
          color: #fff;
          .anticon {
            color: #fff;
          }
        }

        &.active {
          color: #197ce0;
          .anticon {
            color: #197ce0;
          }
        }
      }
    }
  }

  .bottom {
    .back {
      cursor: pointer;
      color: rgba(255, 255, 255, 0.65);
      &:hover {
        color: white;
      }
      .anticon {
        margin-right: 4px;
      }
    }
    .user {
      text-align: center;
      cursor: pointer;
      .avatar {
        margin-bottom: 8px;
        width: 48px;
        height: 48px;
        border-radius: 24px;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .name {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.65);
      }
    }
  }
}
</style>
